<template>
    <el-breadcrumb
      separator="/"
      class="mb-2 mt-1"
      style="vertical-align: bottom"
    >
      <el-breadcrumb-item>
        <div class="flex align-center">
          <el-icon :size="18"><Setting /></el-icon>
          <span class="pl">设定</span>
        </div>
      </el-breadcrumb-item>
      <el-breadcrumb-item>电商设定</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-scrollbar class="scroll">
        <el-form
          style="width: 90%"
          :model="ruleForm"
          label-width="200"
          class="form mt-1"
          status-icon
        >
       
        <el-form-item label="购物车-有效期天数" prop="cart_validity">
          <el-input v-model="ruleForm.cart_validity" />
        </el-form-item>
        <el-form-item label="购物车-到期自动删除" prop="cart_auto_delete">
          <el-switch v-model="ruleForm.cart_auto_delete" />
        </el-form-item>
         <el-form-item label="购物车-查询关键词设定" prop="delivery">
          <div class="flex flex-wrap">
            <el-tag
              class="mr-1 mt mb"
              size="large"
              v-for="tag in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>

            <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="w-20"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button
              v-else
              class="button-new-tag mr-1 mt mb"
              @click="showInput"
            >
              + 设定关键词
            </el-button>
          </div>
        </el-form-item>
         <el-form-item label="订阅通知-私讯设定" prop="subs_private_msg">
          <el-input v-model="ruleForm.subs_private_msg" type="textarea" />
        </el-form-item>
        <el-form-item label="订阅通知-留言设定" prop="subs_leave_msg">
          <el-input v-model="ruleForm.subs_leave_msg" type="textarea" />
        </el-form-item>
        <el-form-item label="结单通知" prop="check_order_msg">
          <el-input v-model="ruleForm.check_order_msg" type="textarea" />
        </el-form-item>
         <el-form-item label="直播库存不足记录" prop="is_open_no_stock">
          <div class="flex flex-column">
            <el-switch v-model="ruleForm.is_open_no_stock" />
            <div class="text-tips-color font-sm">
              默认关闭，开启后，会记录直播留言因库存不足未得标的信息
            </div>
          </div>
        </el-form-item>
         <el-form-item label="购物须知设定" prop="buyer_reading">
          <div style="border: 1px solid #dcdfe6">
            <Toolbar
              style="border-bottom: 1px solid #dcdfe6"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
            />
            <Editor
              style="height: 300px; overflow-y: hidden"
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              @onCreated="handleCreated"
            />
          </div>
        </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <el-form-item label-width="200" style="margin-bottom: 0">
          <el-button
            size="large"
            type="primary"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </el-form-item>
      </template>
    </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted ,onBeforeUnmount, shallowRef} from "vue";
import { $getCurrency, $getArea, $getFBpage } from "@api/setting";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
onMounted(() => {
  //getFilter();
});

interface RuleForm {
    cart_validity: string;
  cart_auto_delete: boolean;
  is_send_order_notice: boolean;
  subs_private_msg: string;
  subs_leave_msg: string;
  check_order_msg: string;
  is_open_no_stock: boolean;
  buyer_reading: string;
}

const ruleForm = reactive<RuleForm>({
   cart_validity: "",
  cart_auto_delete: false,
  is_send_order_notice: false,
  subs_private_msg: "",
  subs_leave_msg: "",
  check_order_msg: "",
  is_open_no_stock: false,
  buyer_reading: "",
});
const editorRef = shallowRef();
const valueHtml = ref('<img src="https://img.full2house.com/ec2/ec2_1/202309/202309061507316688..png">');
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const getFilter = async () => {
  const currency_res = await $getCurrency();
  const area_res = await $getArea();
  const fbpage_res = await $getFBpage();
  filter.value.currency = currency_res.data.list;
  filter.value.area = area_res.data.list;
  filter.value.fbpage = fbpage_res.data.list;
  //初始化默认值
  // ruleForm.currency = currency_res.data.list[0].id;
  // ruleForm.area = area_res.data.list[0].id;
  // ruleForm.fbpage = fbpage_res.data.list[0].id;
};
const submitForm =  () => {
 console.log(ruleForm.value)
};

</script>


<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 320px);
}
</style>
